<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>float</title>
	<style>
	.head{
		height: 100px;
		background-color: green;
		color: yellow;
		text-align: center;
		font:italic 900 60px/100px 华文行楷;
		padding:10px;
		margin-bottom: 10px;
		border: 10px solid pink;
	}
	.main{
		height: 300px;
		background-color: blue;
		color: red;
		
	}
	.left{

		width: 200px;
		height: 250px;
		background-color:orange;
		border-top: 10px;
		float:left;
	}
	.right{
		width: 300px;
		height: 250px;
		background-color:pink;
		border-top: 10px;
		float:left;
	}

	</style>
</head>
<body>
	<div class="head">标&nbsp&nbsp&nbsp&nbsp题</div>
	<div class="main">
		<div class="side left">左边框</div>
		<div class="side right">右边框</div>
	</div>
	<div>底部</div>
	<span id="one">小诗诗独占一行</span>
</body>
</html>